<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style>
        .li {
            float: left;
            list-style-type: none;
            width: 200px;
            height: 266.6px;
            margin-right: 20px;
            margin-top: 20px;
            background: #CCCCCC;
        }

        .li img {
            background: #CCCCCC;
        }

        .clear {
            clear: both;
        }

        .loading {
            text-align: center;
            height: 30px;
            color: #555555;
            display: none;
        }

    </style>
    <title>图片浏览</title>
</head>
<body class="body">
<div>
    <ul id="ul">
    </ul>
</div>
<div class="clear"></div>
<div class="loading">
    加载中,请稍后...
</div>
</body>
</html>

<script src="${pageContext.request.contextPath}/js/resource/jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/js/zcommon.js"></script>

<script>

    var lastId = null;

    fetchImages();

    function fetchImages() {
        $.ajax({
            url: baseUrl.base + 'imageBrower/list',
            method: 'post',
            data:{'lastId':lastId},
            success: function (res) {

                $('.loading').hide();

                var code = res.code;
                if (code == 0) {
                    var results = res.results;

                    if (results.length == 0){
                        //已经加载完
                        lastId = -1;
                        return;
                    }

                    for (var idx in results) {
                        var result = results[idx];

                        var treatment_img = result.treatment_img;
                        var treatment_imgs = treatment_img.split(";")

                        for (var i in treatment_imgs) {
                            $("#ul").append("<li class='li'><img width=100% height='100%' src='" + treatment_imgs[i] + "'/></li>");
                        }

                        lastId = result.treatment_id;
                    }
                }
            }
        })
    }


    $(window).scroll(function () {

        if (lastId == -1){
            $('.loading').text('没有更多数据了');
            $('.loading').show();
            return;
        }

        if ($(document.body).height() - window.innerHeight - $(document).scrollTop() +16 <= 0) {

            if ($('.loading').is(':hidden')){
                $('.loading').show();

                fetchImages();
            }
        }
    });
</script>
